<template>
    <el-menu
    mode="horiontal"
    :collapse=false
    active-text-color="orange"
    background-color="rgba(70, 76, 91, 1)"
    text-color="#ccc"
    @select="handleSelect"
    >
      <el-menu-item index="/admin/index/zhuye">
        <el-icon color="#409efc">
          <House />
          </el-icon>
        主页(后台首页)
        </el-menu-item>

      <el-menu-item index="/home/login">
      <el-icon><Box /></el-icon>
      <router-link to="/home/login">前台首页</router-link>
        </el-menu-item>

      <el-sub-menu index="user-management">
  <template #title>
    <el-icon><User /></el-icon>
    用户管理
  </template>
  <el-menu-item index="/admin/index/user">用户列表</el-menu-item>
</el-sub-menu>
    
    
      <el-sub-menu index="4">
            <template #title>
              <el-icon><Van /></el-icon>
              商品管理
              </template>
            <el-menu-item index="/admin/index/shop">商品分类管理</el-menu-item>
            <el-menu-item index="/admin/index/biao">商品列表</el-menu-item>
            <el-menu-item index="/admin/index/lun">轮播图管理</el-menu-item>
            <el-menu-item index="/admin/index/dingdan">订单管理</el-menu-item>
        </el-sub-menu>

        <el-menu-item index="/admin/index/echarts">
          <el-icon><MessageBox /></el-icon>
          营收管理(Echar插件)
          </el-menu-item>

        <el-menu-item index="/admin/index/touxiang">
          <el-icon><TakeawayBox /></el-icon>
          文件管理
          </el-menu-item>
    </el-menu>

</template>

<script setup>
// import { MessageBox,Box,House,User,Van,TakeawayBox } from '@element-plus/icons-vue'
import { ref, watch } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const router = useRouter()
const route = useRoute()

const activeMenu = ref(route.path)

// 监听路由变化更新激活菜单
watch(() => route.path, (newPath) => {
  activeMenu.value = newPath
})

const handleSelect = (index) => {
  router.push(index)
}
</script>

<style scoped>
ul{
    width: 18%;
    height: 100%;
    background-color: #2a2a33;
    color: white;
}
svg{
  
  color: aliceblue;
}
</style>